<template>
	<div id="body"
		 @touchend="touchend"
		 @touchmove="touchmove">
		<div v-for="(but,index) in buts"
			 :key="index"
			 :class="{moving:moving===index}"
			 :style="{transform:'translate3d(calc('+(but.move+'px + '+but.offset+' * 100%)')+',0,0)'}"
			 @touchstart="touchstart(index,$event)">{{but.name}}</div>
	</div>
</template>

<script>
	export default{
		name:'Demo',
		data(){
			return {
				buts:[
					{
						name:'按钮1',
						offset:0,
						move:0
					},{
						name:'按钮2',
						offset:0,
						move:0
					},{
						name:'按钮3',
						offset:0,
						move:0
					},{
						name:'按钮4',
						offset:0,
						move:0
					}
				],
				moving:-1
			};
		},
		computed:{
			movingBut(){
				return this.buts[this.moving];
			},
			butWidth(){
				return window.innerWidth/this.buts.length;
			},
			differ(){
				if(this.movingBut){
					return Math.floor((this.movingBut.move+this.butWidth/2)/this.butWidth)+this.movingBut.offset;
				}
				return null;
			}
		},
		watch:{
			differ(val,old){
				if(val==null||old==null) return;
				const offset=val-old;
				const but=this.buts.find((ele,index) => {
					return index!==this.moving&&(index+ele.offset===val+this.moving);
				});
				if(but){
					but.offset-=offset;
				}
			}
		},
		methods:{
			touchstart(index,{touches:[{clientX}]}){
				this.moving=index;
				this.start=clientX;
			},
			touchend(e){
				if(this.movingBut){
					this.movingBut.offset=Math.max(-this.moving,Math.min(this.differ,this.buts.length-this.moving-1));
					this.movingBut.move=0;
					this.moving=-1;
				}
			},
			touchmove({touches:[{clientX}]}){
				if(this.movingBut){
					this.movingBut.move=clientX-this.start;
				}
			}
		}
	};
</script>

<style lang="scss">
body{
	background:#eee;
}
#body{
	display:flex;
	position:fixed;
	height:50px;
	width:100%;
	bottom:0;
	background:#fff;
	box-shadow:0 5px 10px #000;
	user-select:none;
	>div{
		flex-basis:1px;
		flex-grow:1;
		text-align:center;
		line-height:50px;
		transition:transform 0.5s;
		&.moving{
			background:#e0eaff;
			transition:0s;
		}
	}
}
</style>
